<!-- 视图切换和筛选工具栏 -->
<section class="bg-white rounded-xl shadow-sm p-4 mb-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <!-- 视图切换 -->
        <div class="flex items-center border rounded-md overflow-hidden">
            <button id="card-view-btn" class="px-3 py-2 bg-primary text-white">
                <i class="fa fa-th-large"></i>
            </button>
            <button id="list-view-btn" class="px-3 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                <i class="fa fa-list"></i>
            </button>
        </div>
        
        <!-- 排序选项 -->
        <div class="flex items-center gap-4">
            <span class="text-sm text-gray-500">排序：</span>
            <select class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                <option>最新发布</option>
                <option>最多阅读</option>
                <option>最多点赞</option>
                <option>最多评论</option>
            </select>
        </div>
        
        <!-- 分类筛选 -->
        <div class="flex items-center gap-4">
            <span class="text-sm text-gray-500">分类：</span>
            <select class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                <option value="">全部分类</option>
                {{foreach $data['content']['categories'] as $category}}
                    {{if $category['id'] != ''}}
                        <option value="{{$category['id']}}">{{$category['name']}}</option>
                    {{/if}}
                {{/foreach}}
            </select>
        </div>
    </div>
</section>